baubs git
Commit 621de91bc8845e216a545de50b6396a96bfd4943
Parents : 1820bcd
Author : Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date : 2025-12-21T00:02:22+01:00
fix: Improve theme color definitions and dark mode styling
- Fixed CSS variable format by wrapping HSL values in hsl() function
- Removed double hsl() wrapping in @theme section (now uses var() directly)
- Switched dark mode card background to OKLCH for better perceptual uniformity
- Improved dark mode border visibility (17.5% → 37.5% lightness)
- Improved dark mode input visibility (17.5% → 47.5% lightness)
- Changed app background from gray-300 to gray-100 for cleaner appearance
- Enhanced PatternCanvasPlaceholder to match PatternCanvas styling with icon and description
These changes ensure shadcn components use colors correctly and improve overall dark mode readability.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes
3 files changed, 97 insertions(+), 76 deletions(-)
Diff
diff --git a/src/App.css b/src/App.css
index 8f860de..8b661f3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -8,53 +8,53 @@
@layer base {
:root {
/* Background colors */
- --background: 0 0% 100%;
- --foreground: 222.2 84% 4.9%;
+ --background: hsl(0 0% 100%);
+ --foreground: hsl(222.2 84% 4.9%);
/* Card colors */
- --card: 0 0% 100%;
- --card-foreground: 222.2 84% 4.9%;
+ --card: hsl(0 0% 100%);
+ --card-foreground: hsl(222.2 84% 4.9%);
/* Popover colors */
- --popover: 0 0% 100%;
- --popover-foreground: 222.2 84% 4.9%;
+ --popover: hsl(0 0% 100%);
+ --popover-foreground: hsl(222.2 84% 4.9%);
/* Primary - Blue (existing brand color) */
- --primary: 221.2 83.2% 53.3%; /* blue-600 */
- --primary-foreground: 210 40% 98%;
+ --primary: hsl(221.2 83.2% 53.3%); /* blue-600 */
+ --primary-foreground: hsl(210 40% 98%);
/* Secondary - Orange (existing secondary color) */
- --secondary: 24.6 95% 53.1%; /* orange-500 */
- --secondary-foreground: 60 9.1% 97.8%;
+ --secondary: hsl(24.6 95% 53.1%); /* orange-500 */
+ --secondary-foreground: hsl(60 9.1% 97.8%);
/* Muted colors */
- --muted: 210 40% 96.1%;
- --muted-foreground: 215.4 16.3% 46.9%;
+ --muted: hsl(210 40% 96.1%);
+ --muted-foreground: hsl(215.4 16.3% 46.9%);
/* Accent - Purple (existing accent color) */
- --accent: 262.1 83.3% 57.8%; /* purple-500 */
- --accent-foreground: 210 40% 98%;
+ --accent: hsl(262.1 83.3% 57.8%); /* purple-500 */
+ --accent-foreground: hsl(210 40% 98%);
/* Destructive - Red (existing danger color) */
- --destructive: 0 84.2% 60.2%; /* red-500 */
- --destructive-foreground: 210 40% 98%;
+ --destructive: hsl(0 84.2% 60.2%); /* red-500 */
+ --destructive-foreground: hsl(210 40% 98%);
/* Success - Green (existing success color) */
- --success: 142.1 76.2% 36.3%; /* green-600 */
- --success-foreground: 210 40% 98%;
+ --success: hsl(142.1 76.2% 36.3%); /* green-600 */
+ --success-foreground: hsl(210 40% 98%);
/* Warning - Amber (existing warning color) */
- --warning: 45.4 93.4% 47.5%; /* amber-500 */
- --warning-foreground: 60 9.1% 97.8%;
+ --warning: hsl(45.4 93.4% 47.5%); /* amber-500 */
+ --warning-foreground: hsl(60 9.1% 97.8%);
/* Info - Cyan (existing info color) */
- --info: 188.7 85.7% 53.3%; /* cyan-500 */
- --info-foreground: 210 40% 98%;
+ --info: hsl(188.7 85.7% 53.3%); /* cyan-500 */
+ --info-foreground: hsl(210 40% 98%);
/* Border and input */
- --border: 214.3 31.8% 91.4%;
- --input: 214.3 31.8% 91.4%;
- --ring: 221.2 83.2% 53.3%; /* matches primary */
+ --border: hsl(214.3 31.8% 91.4%);
+ --input: hsl(214.3 31.8% 91.4%);
+ --ring: hsl(221.2 83.2% 53.3%); /* matches primary */
/* Radius */
--radius: 0.5rem;
@@ -62,42 +62,43 @@
@media (prefers-color-scheme: dark) {
:root {
- --background: 222.2 84% 4.9%;
- --foreground: 210 40% 98%;
+ --background: hsl(222.2 84% 4.9%);
- --card: 222.2 84% 4.9%;
- --card-foreground: 210 40% 98%;
+ --foreground: hsl(210 40% 98%);
- --popover: 222.2 84% 4.9%;
- --popover-foreground: 210 40% 98%;
+ --card: oklch(27.8% 0.033 256.848);
+ --card-foreground: hsl(210 40% 98%);
- --primary: 217.2 91.2% 59.8%; /* blue-500 lighter for dark */
- --primary-foreground: 210 40% 98%;
+ --popover: hsl(222.2 84% 4.9%);
+ --popover-foreground: hsl(210 40% 98%);
- --secondary: 20.5 90.2% 48.2%; /* orange-600 for dark */
- --secondary-foreground: 210 40% 98%;
+ --primary: hsl(217.2 91.2% 59.8%); /* blue-500 lighter for dark */
+ --primary-foreground: hsl(210 40% 98%);
- --muted: 217.2 32.6% 17.5%;
- --muted-foreground: 215 20.2% 65.1%;
+ --secondary: hsl(20.5 90.2% 48.2%); /* orange-600 for dark */
+ --secondary-foreground: hsl(210 40% 98%);
- --accent: 263.4 70% 50.4%; /* purple-600 for dark */
- --accent-foreground: 210 40% 98%;
+ --muted: hsl(217.2 32.6% 17.5%);
+ --muted-foreground: hsl(215 20.2% 65.1%);
- --destructive: 0 62.8% 30.6%; /* red-900 */
- --destructive-foreground: 210 40% 98%;
+ --accent: hsl(263.4 70% 50.4%); /* purple-600 for dark */
+ --accent-foreground: hsl(210 40% 98%);
- --success: 142.1 70.6% 45.3%; /* green-500 for dark */
- --success-foreground: 210 40% 98%;
+ --destructive: hsl(0 62.8% 30.6%); /* red-900 */
+ --destructive-foreground: hsl(210 40% 98%);
- --warning: 47.9 95.8% 53.1%; /* amber-400 for dark */
- --warning-foreground: 26 83.3% 14.1%;
+ --success: hsl(142.1 70.6% 45.3%); /* green-500 for dark */
+ --success-foreground: hsl(210 40% 98%);
- --info: 188.7 85.7% 53.3%; /* cyan-500 */
- --info-foreground: 210 40% 98%;
+ --warning: hsl(47.9 95.8% 53.1%); /* amber-400 for dark */
+ --warning-foreground: hsl(26 83.3% 14.1%);
- --border: 217.2 32.6% 17.5%;
- --input: 217.2 32.6% 17.5%;
- --ring: 224.3 76.3% 48%;
+ --info: hsl(188.7 85.7% 53.3%); /* cyan-500 */
+ --info-foreground: hsl(210 40% 98%);
+
+ --border: hsl(217.2 32.6% 37.5%);
+ --input: hsl(217.2 32.6% 47.5%);
+ --ring: hsl(224.3 76.3% 48%);
}
}
}
@@ -109,25 +110,25 @@
@theme {
/* SHADCN/UI COLORS - For bg-primary, bg-destructive, etc. */
- --color-primary: hsl(var(--primary));
- --color-primary-foreground: hsl(var(--primary-foreground));
- --color-secondary: hsl(var(--secondary));
- --color-secondary-foreground: hsl(var(--secondary-foreground));
- --color-destructive: hsl(var(--destructive));
- --color-destructive-foreground: hsl(var(--destructive-foreground));
- --color-muted: hsl(var(--muted));
- --color-muted-foreground: hsl(var(--muted-foreground));
- --color-accent: hsl(var(--accent));
- --color-accent-foreground: hsl(var(--accent-foreground));
- --color-background: hsl(var(--background));
- --color-foreground: hsl(var(--foreground));
- --color-card: hsl(var(--card));
- --color-card-foreground: hsl(var(--card-foreground));
- --color-popover: hsl(var(--popover));
- --color-popover-foreground: hsl(var(--popover-foreground));
- --color-border: hsl(var(--border));
- --color-input: hsl(var(--input));
- --color-ring: hsl(var(--ring));
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
/* PRIMARY - Main brand color (references Blue) - For bg-primary-600 style classes */
--color-primary-50: var(--color-blue-50);
@@ -227,7 +228,7 @@
/* Canvas/Konva-specific colors for embroidery rendering */
--color-canvas-grid: #e0e0e0;
--color-canvas-origin: #888888;
- --color-canvas-hoop: #2196F3;
+ --color-canvas-hoop: #2196f3;
--color-canvas-bounds: #ff0000;
--color-canvas-position: #ff0000;
}
@@ -292,7 +293,8 @@
/* Pulse glow effect - uses primary-600 */
@keyframes pulseGlow {
- 0%, 100% {
+ 0%,
+ 100% {
box-shadow: 0 0 0 0 rgb(37 99 235 / 0.4); /* primary-600 with 40% opacity */
}
50% {
diff --git a/src/App.tsx b/src/App.tsx
index a42724f..f732876 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -66,7 +66,7 @@ function App() {
}, [resumedPattern, resumeFileName, pesData, setPattern, setPatternOffset]);
return (
- <div className="h-screen flex flex-col bg-gray-300 dark:bg-gray-900 overflow-hidden">
+ <div className="h-screen flex flex-col bg-gray-100 dark:bg-gray-900 overflow-hidden">
<AppHeader />
<div className="flex-1 p-4 sm:p-5 lg:p-6 w-full overflow-y-auto lg:overflow-hidden flex flex-col">
diff --git a/src/components/PatternCanvasPlaceholder.tsx b/src/components/PatternCanvasPlaceholder.tsx
index d2ebf1e..4e9d2ec 100644
--- a/src/components/PatternCanvasPlaceholder.tsx
+++ b/src/components/PatternCanvasPlaceholder.tsx
@@ -1,10 +1,29 @@
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import {
+ Card,
+ CardHeader,
+ CardTitle,
+ CardContent,
+ CardDescription,
+} from "@/components/ui/card";
+import { PhotoIcon } from "@heroicons/react/24/solid";
export function PatternCanvasPlaceholder() {
return (
- <Card className="p-0 gap-0 lg:h-full animate-fadeIn flex flex-col">
- <CardHeader className="p-6 pb-4 border-b-2 border-gray-300 dark:border-gray-600">
- <CardTitle className="text-base lg:text-lg">Pattern Preview</CardTitle>
+ <Card
+ className={`p-0 gap-0 lg:h-full flex flex-col border-l-4 border-gray-400 dark:border-gray-600`}
+ >
+ <CardHeader className="p-4 pb-3">
+ <div className="flex items-start gap-3">
+ <PhotoIcon
+ className={`w-6 h-6 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5`}
+ />
+ <div className="flex-1 min-w-0">
+ <CardTitle className="text-sm">Pattern Preview</CardTitle>
+ <CardDescription className="text-xs">
+ No pattern loaded
+ </CardDescription>
+ </div>
+ </div>
</CardHeader>
<CardContent className="p-6 flex-1 flex flex-col">
<div className="h-[400px] sm:h-[500px] lg:flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 relative overflow-hidden">
Served by rngit 1.3.3 - Generated in 0.04s